<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结课作业基础版</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/tool-kits.css">
  <script src="./js/school.min.js"></script>
  <script src="./js/tool-kits.js"></script>
</head>

<body>
  <nav>
    <div class="logo">
      <img src="./img/logo.png">
    </div>
    <div class="navItems">
      <a href="https://example.com" class="navItem btn">开发文档</a>
      <a href="https://example.com" class="navItem btn">交流中心</a>
      <a href="https://example.com" class="navItem btn">服务市场</a>
      <a href="https://example.com" class="navItem btn">开源联盟</a>
      <a href="https://example.com" class="navItem btn active">管理中心</a>
    </div>
  </nav>
  <main>
    <div class="banner">
      <p>百度前端训练营2021开营了, 赶紧报名吧!</p>
    </div>
    <div class="join active" id="join">
      <div class="schoolTake">
        <div class="input-dual-col-select" id="school-pick">
          <input class="input-text input-dual-col-picker" disabled name="schoolTake" id="schoolTake"
            placeholder="点击选择学校">
          <div class="input-dual-col-box">
            <div class="left"></div>
            <div class="right"></div>
          </div>
        </div>
        <label for="schoolTake">选择您的学校</label>
      </div>
      <div class="yearTake">
        <div class="input-year" id="enter-year">
          <input class="input-text input-year-picker" disabled name="yearTake" id="yearTake">
          <div class="input-year-box"></div>
        </div>
        <label for="yearTake">选择您入学年份</label>
      </div>
      <div class="email">
        <input class="input-text" type="email" name="email" id="email">
        <label for="email">输入您的电子邮箱</label>
      </div>
      <div class="submit">
        <button type="button" id="join-submit" class="btn btn-round btn-blue">报名</button>
      </div>
    </div>
    <div class="join joined" id="joined">
      <p>
        您已完成报名,开始您的学习之旅吧!
      </p>
      <a href="javascript:;">重新报名</a>
    </div>
    <div id="join-alert" class="join-alert alert"></div>
    <div class="purpose">
      <div class="title-2">我们的宗旨</div>
      <div class="proposeItems">
        <div class="proposeItem">
          <div class="title-3">自律独立思考</div>
          <div class="propimg propimg1"></div>
        </div>
        <div class="proposeItem">
          <div class="title-3">实践</div>
          <div class="propimg propimg2"></div>
        </div>
        <div class="proposeItem">
          <div class="title-3">总结回顾</div>
          <div class="propimg propimg3"></div>
        </div>
        <div class="proposeItem">
          <div class="title-3">分享交流</div>
          <div class="propimg propimg4"></div>
        </div>
      </div>
    </div>
    <div class="schedule">
      <div class="title-2">课程安排</div>
      <div class="tabs-nav">
        <div class="tab-nav active">全部</div>
        <div class="tab-nav">HTML</div>
        <div class="tab-nav">CSS</div>
        <div class="tab-nav">JavaScript</div>
      </div>
      <div class="tabs-wapper">
        <div class="tabs-content">
          <div class="tab-content">
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-1.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-2.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-3.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-green">CSS</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-4.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-5.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-6.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content">
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-1.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-2.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-6.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content">
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-1.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-3.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-green">CSS</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-5.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content">
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-1.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-4.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-5.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-green">CSS</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
            <div class="cls-card">
              <div class="cls-img">
                <img src="./img/cls-6.jpg">
              </div>
              <div class="cls-info">
                <div class="cls-title title-3">第一课 这里是课程的名字</div>
                <div class="cls-detail">
                  这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要这里是课程摘要
                </div>
                <div class="categorys">
                  <div class="category category-light-blue">HTML</div>
                  <div class="category category-deep-blue">JavaScript</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="foot-content">
      <div class="ife">
        <div class="tag tag-circle tag-black">I</div>
        <div class="tag tag-circle tag-black">F</div>
        <div class="tag tag-circle tag-black">E</div>
      </div>
      <div class="links-cards">
        <div class="links-card">
          <div class="title-3">Links</div>
          <div class="links">
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
            <a href="https://ex2ample.com" class="link">百度培训</a>
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
          </div>
        </div>
        <div class="links-card">
          <div class="title-3">Links</div>
          <div class="links">
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
            <a href="https://ex2ample.com" class="link">百度培训</a>
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
          </div>
        </div>
        <div class="links-card">
          <div class="title-3">Links</div>
          <div class="links">
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
            <a href="https://ex2ample.com" class="link">百度培训</a>
            <a href="https://ex2ample.com" class="link">百度技术培训中心</a>
            <a href="https://ex2ample.com" class="link">百度技术</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
<script src="./js/index.js"></script>
</html>